<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="sl" tagdir="/WEB-INF/tags" %>
<%@page import="com.solution.common.config.PublicConfig"%>
<%@page import="com.solution.admin.home.constants.IndexConstants"%>
<%
	String basePath = PublicConfig.ROOT_PATH;
	String wxRootUrl = PublicConfig.WX_ROOT_URL;
	String imgRootURL = PublicConfig.IMG_ROOT_URL;
	String ossImgZoomWX = PublicConfig.OSS_IMG_ZOOM_WX; //微信图片缩放
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>${title }</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/statics_wx/css/style.css">
<script src="<%=basePath%>/statics_wx/js/jquery.min.js"></script>
<script src="<%=basePath%>/statics_wx/js/js.js"></script>
<script src="<%=basePath%>/statics_wx/js/iscroll.js"></script>
<script src="<%=basePath%>/statics_wx/js/custom.js"></script>
<script type="text/javascript" src="<%=basePath%>/statics/plugins/layer/layer.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
//系统域名 
var rootPath = '<%=basePath%>';
var wxRootUrl = '<%=wxRootUrl%>';
// 系统上传文件展示域名
var imgRootURL = '<%=imgRootURL%>';
$(function(){
	
	$('.sxbtn').click(function(){$(this).toggleClass('current');
		$('.bjd_list1').toggleClass('current');
	})
	
	// 关键字查询
	$("#search_key").keydown(function(event){
		if(event.keyCode==13){ 
			var search_key = $("#search_key").val();
			url = rootPath + "/wx/product/search";
			var form = $('<form></form>');  
		    form.attr('action', url);
		    form.attr('method', 'post');
		    form.attr('target', '_self');
		    form.append('<input type="hidden" name="searchKey" value="'+search_key+'"/>');
		    form.appendTo("body");
		    form.submit();
		} 
	});
	
	//搜索
	$("#doSearch").click(function(){
		var search_key = $("#search_key").val();
		url = rootPath + "/wx/product/search";
		var form = $('<form></form>');  
	    form.attr('action', url);
	    form.attr('method', 'post');
	    form.attr('target', '_self');
	    form.append('<input type="hidden" name="searchKey" value="'+search_key+'"/>');
	    form.appendTo("body");
	    form.submit();
	});
	
	$('a#icon_sx,.sx_box .hd span a,.sx_box .bottom a').click(function(){$('#sx_box').toggle();});

	$('.sx_box dl dt h2 a').click(function(){$(this).toggleClass('current');$(this).parent().next().toggle();});
	$('.list3 ul li a').click(function(){$(this).parent().toggleClass('current');$(this).parent().siblings().removeClass('current')});
	
	$('.pp_list ul li a').click(function(){
		$(this).parent().addClass('current');
		$(this).parent().siblings().removeClass('current');
	});
	$('#pricebtn').click(function(){
		$(this).parent().toggleClass('current');
		$('#brand_box,#fl_box').hide();
	});	
	$('#brandbtn,#brand_box .operate_part ul li a').click(function(){
		$('#brand_box').toggle();
		$(this).parent().toggleClass('current');
		$(this).parent().siblings().removeClass('current');
	});
	$('#flbtn,#fl_box .operate_part ul li a').click(function(){
		$('#fl_box').toggle();
		$(this).parent().toggleClass('current');
		$(this).parent().siblings().removeClass('current');
	});
	
	function initSpecCheck(container , main_product_price){
		container.find('li label').click(function(){
			if($(this).hasClass('checked')){
				$(this).addClass('checked');
			}else{
				$(this).addClass('checked');
				$(this).parent().siblings().find('label').removeClass('checked');
			}
			var spec_price = 0;
			$('.good_sxlist ul li label.checked').each(function(){
				spec_price = spec_price + parseFloat($(this).parent().attr("spec_price"));
			});
			var last_price = spec_price + parseFloat(main_product_price);
			
			container.parent().find("#v_product_price").html("￥<em>"+numberInteger(last_price)+"</em><span>"+numberDecimal(last_price)+"</span>");
		});
	}
	
	// initSpecCheck();
	
	// 关闭端口规格项筛选弹层
	$("#btn_close_product_spec").click(function(){
		$('#goods_editbox').toggle();
	});
	
	// 绑定添加购物车事件
	function init_add_to_shoppingcart(this_){
		// 商品名称 价格 从页面上取
		var product_name = this_.closest("h3").find("#product_name").val();
		var product_price_integer = this_.closest("h3").find("#product_price_integer").val();
		var product_price_deciaml = this_.closest("h3").find("#product_price_decimal").val();
		var product_image = this_.closest("h3").find("#product_image").val();
		var product_id = this_.attr("product_id");
		
		var main_product_price = this_.closest("h3").find("#main_product_price").val();
		
		$("#v_product_image").attr("src",imgRootURL+"/"+product_image);
		$("#v_product_name").text(product_name);
		$("#v_product_price").html("￥<em>"+product_price_integer+"</em><span>."+product_price_deciaml+"</span>");
		$("#v_product_id").val(product_id);
		
		var self = this_;
		
		// 查询商品规格项
		// 添加购物车
		var url = rootPath + "/wx/product/listProductSpec";
		var params = {
			productId : product_id
		};
		$.ajax({
			type : "post",
			url : url,
			data : params,
			datatype : "json",
			success : function(json) {
				if(json){
					$("#spec_container").html("");
					var has_spec = json.has_spec;
					if(has_spec == "true"){
						// 商品规格 
						var product_spec = json.product_spec;
						for(var i = 0 ; i < product_spec.length; i++){
							var spec = product_spec[i];
							var spec_value_list = spec.productSpecList;
							
							var spec_value_str = "";
							for(var j = 0; j <spec_value_list.length; j++){
								var spec_value = spec_value_list[j];
								spec_value_str += 
									"<li spec_price=\""+spec_value.specPrice+"\">"+
	                        			"<label "+(j == 0 ? "class='checked'" : "")+" spec_id=\""+spec_value.id+"\" >"+spec_value.specValue+"</label>"+
		                        	"</li>";
							}
							
							var product_spec_str = ""+ 
									"<div name=\"spec_list\" class=\"hd\">"+
					            		"<h3>"+spec.specName+"</h3>"+
						            "</div>"+
						            "<div class=\"bd\">"+
						            	"<div class=\"good_sxlist\">"+
						                	"<ul>"+
						                		spec_value_str+
						                    "</ul>"+
						                "</div>"+
						            "</div>";
							$("#spec_container").append($(product_spec_str));
							initSpecCheck($("#spec_container"),main_product_price);
						}
					}
					$('#goods_editbox').toggle();
				}
			},
			error : function() {
				layer.msg('暂时无法查询商品规格项',{time:1000});
			}
		});
	}
	
	// 异步查询规格项,弹出规格项
	$("a[id='btn_add_to_shoppingcart']").each(function(){
		$(this).click(function(){
			init_add_to_shoppingcart($(this));
		});
	});
	
	// 减少购买数量
	$("#btn_reduce_buy_num").click(function(){
		var buy_num = $("#v_buy_num").val();
		if(buy_num != 1){
			$("#v_buy_num").val(parseInt(buy_num)-1);
		}
		
	});
	// 增加购买数量
	$("#btn_add_buy_num").click(function(){
		var buy_num = $("#v_buy_num").val();
		$("#v_buy_num").val(parseInt(buy_num)+1);
	});
	
	// 确认添加到的购物车
	$("#btn_buy_confirm").click(function(){
		// 规格项选择
		var flag = true;
		var spec = [];
		$("div[name='spec_list']").each(function(){
			var spec_name= $(this).find("h3").text();
			var select_li = $(this).next("div.bd").find("label.checked");
			var selected_num = select_li.length;
			if(selected_num == 0){
				layer.msg('请选择'+spec_name,{time:2000});
				flag = false;
			}else{
				select_li.each(function(){
					spec.push({id:$(this).attr("spec_id"),specName:spec_name,specValue:$(this).text()});
				});
			}
		});
		
		if(!flag){
			return false;
		}
		
		// 添加购物车
		var url = rootPath + "/wx/shoppingcart/add";
		var params = {
			productId : $("#v_product_id").val(),
			buyNum : 1,
			addFlag : 1,
			specListJson:JSON.stringify(spec)
		};
		$.ajax({
			type : "post",
			url : url,
			data : params,
			datatype : "json",
			success : function(json) {
				if (json.resultCode == '1') {
					layer.msg('加入购物车成功',{time:1000});
					$('#goods_editbox').toggle();
				}
			},
			error : function() {
				layer.msg('暂时无法加入购物车',{time:1000});
			}
		});
	});

	var uuid = $("#uuid").val();
	$.ajax({
		type : 'POST',
		url : rootPath + "/home/isLogin",
		async : true,
		dataType : 'json',
		success : function(json) {
			if (json.code == '1') {
				//登录用户分享自己的链接
				var linkUrl = wxRootUrl + "/wx/share/module?uuid="+uuid;
				$("#shareModuleUrl").val(linkUrl);
			} else {
				//未登录用户分享本页面链接
				$("#shareModuleUrl").val("");
			}
		}
	});

	//微信接口调用参数
	wx.config({
		debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId : $('#appId').val(), // 必填，公众号的唯一标识
		timestamp : $('#timestamp').val(), // 必填，生成签名的时间戳
		nonceStr : $('#nonceStr').val(), // 必填，生成签名的随机串
		signature : $('#signature').val(),// 必填，签名
		jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage' ] // 必填，需要使用的JS接口列表，所有JS接口列表
	});
	wx.ready(function(){
		wx.checkJsApi({
			jsApiList: [
			            'onMenuShareTimeline',
			            'onMenuShareAppMessage'
			            ]
		});

		//分享朋友
		var itemTitle = $("#itemTitle").val();
		var itemDesc = $("#itemDesc").val();
		var itemImage = $("#itemImage").val();
		var imagePath = $("#imagePath").val();
		var linkUrl = $("#shareModuleUrl").val();
		wx.onMenuShareAppMessage({
			title: itemTitle, // 分享标题
			desc: itemDesc, // 分享描述
			link: linkUrl, // 分享链接，该链接域名必须与当前企业的可信域名一致
			imgUrl: itemImage, // 分享图标
			success: function () {
				// 用户确认分享后执行的回调函数
				shareModuleNotify(uuid,itemTitle,itemDesc,imagePath);
			},
			cancel: function () {
				// 用户取消分享后执行的回调函数
				//$('#share_box').hide();
			},
			fail: function (res) {
				alert('wx.onMenuShareAppMessage:fail: '+JSON.stringify(res));
			}
		});

		//分享朋友圈
		wx.onMenuShareTimeline({
			title: itemTitle, // 分享标题
			link: linkUrl, // 分享链接，该链接域名必须与当前企业的可信域名一致
			imgUrl: itemImage, // 分享图标
			success: function () {
				// 用户确认分享后执行的回调函数
				shareModuleNotify(uuid,itemTitle,itemDesc,imagePath);
			},
			cancel: function () {
				// 用户取消分享后执行的回调函数
				//$('#share_box').hide();
			},
			fail: function (res) {
				alert('wx.onMenuShareTimeline:fail: '+JSON.stringify(res));
			}
		});
	});
	wx.error(function(res){
//		alert(JSON.stringify(res));
	});
});

//分享成功后回调
function shareModuleNotify(uuid,itemTitle,itemDesc,imagePath){
	var productIds = [];
	$("input[name='productId']").each(function(){
		productIds.push(parseInt($(this).val()));
	});
	$.ajax({
		type:"post",
		url:rootPath+"/wx/share/doShareModuleShared",
		data:{uuid: uuid, shareTitle: itemTitle, shareDesc: itemDesc, imagePath: imagePath, productIds: JSON.stringify(productIds)},
		datatype: "json",
		success:function(json){
			if (json.resultCode == "1") {
				console.log(json.resultMsg);
			} else {
				console.log(json.resultMsg);
			}
		},
		error: function(json){
			console.log(json.resultMsg);
		}
	});
}
</script>

</head>
<body style="background:#f5f5f5">
<c:set var="rootPath" value="<%=basePath %>"></c:set>
<c:set var="imgRootURL" value="<%=imgRootURL %>"></c:set>
<c:set var="ossImgZoomWX" value="<%=ossImgZoomWX %>"></c:set>
<input type="hidden" id="appId" value="${appId }"/>
<input type="hidden" id="timestamp" value="${timestamp }"/>
<input type="hidden" id="nonceStr" value="${nonceStr }" />
<input type="hidden" id="signature" value="${signature }"/>
<input type="hidden" id="uuid" value="${uuid}" />
<input type="hidden" id="shareModuleUrl" value="" />
<input type="hidden" id="itemTitle" value="${titleItem.moduleName }"/>
<input type="hidden" id="itemDesc" value="${titleItem.secondTitle }"/>
<input type="hidden" id="itemImage" value="${imgRootURL }${titleItem.imagePath }${ossImgZoomWX }"/>
<input type="hidden" id="imagePath" value="${titleItem.imagePath }"/>

<input type="hidden"  id="sync_search_key"  value="${searchKey}"/>
<div class="headerfixed"></div>
	<%--添加购物车弹出规格项 --%>
	<div class="overlay" id="goods_editbox" style="display:none;">
		<div class="goods_editbox">
		<a id="btn_close_product_spec" href="javascript:void(0)" class="icon_close"></a>
	    <div class="goods_editbox_con">
	    	<input type="hidden"  id="v_product_id"  value=""/>
 	    	<div class="good_info1">
	        	<div class="pic">
	            	<img id="v_product_image" src="${rootPath}/statics/images/index_icon1.png" />
	            </div>
	            <div class="item-info">
	            	<h2 id="v_product_name"></h2>
	                <h3 id="v_product_price"></h3>
	            </div>
	        </div>
	        <div class="good_info2"  id="spec_container">
	           
	        </div>
	        <div class="good_info3">
	        	<strong>数量</strong>
	            <div class="txt1">
	            	<b>
						<a href="javascript:void(0)" id="btn_reduce_buy_num" class="icon_jian_gray"></a>
						<span>
							<input type="text" id="v_buy_num" value="1" >
						</span>
						<a href="javascript:void(0)" id="btn_add_buy_num" class="icon_jia"></a>
					</b>
	            </div>
	        </div>
	    </div>
	    <div class="bottom">
	    	<p>
	        	<input type="button" id="btn_buy_confirm" class="inputbtn1" value="确定" />
	        </p>
	    </div>
	</div>
</div>
<div class="search_part13">
	<div class="search_part13_con">
		<div class="search_part13_con1">
	    	<i></i>
	        <p>
	        	<input type="text" id="search_key" name="searchKey" class="inputstyle1" value="${searchKey}" placeholder="一体机" />
	        </p>
	        <a id="doSearch" href="javascript:void(0);">搜索<u></u></a>
	    </div>
	    <a href="#" class="sxbtn" style="margin-left:2px;"></a>
    </div>
</div>

<div class="bjd_list1"  id="product_scroll_wrapper">
	<div class="bjd_list1_con">
    	<ul id="product_list">
    		<c:forEach items="${productList}" var="product">
    		<li>
    			<input type="hidden" name="productId" value="${product.id}"/>
            	<div class="box4">
                	<div class="pic">
                    	<a href="${rootPath}/wx/product/detail?productId=${product.id}"><img src="${imgRootURL}/${product.mainImagePath}${ossImgZoomWX}" /></a>
                    </div>
                    <div class="item-info">
                    	<a href="${rootPath}/wx/product/detail?productId=${product.id}"><h2>${product.productName }</h2></a>
                        <h3>
                        	<strong>¥<em>${product.productPriceInteger }</em>.${product.productPriceDecimal }</strong>
                        	<input type="hidden" id="product_name" value="${product.productName }"/>
							<input type="hidden" id="product_image" value="${product.mainImagePath }"/>
							<input type="hidden" id="product_price_integer" value="${product.productPriceInteger }"/>
							<input type="hidden" id="product_price_decimal" value="${product.productPriceDecimal }"/>
							<input type="hidden" id="main_product_price" value="${product.mainProductPrice }"/>
                        	<b>
                        		<a href="javascript:void(0)" product_id="${product.id}" id="btn_add_to_shoppingcart"></a>
                        	</b>
                        </h3>
                    </div>
                </div>
                <u></u>
            </li>
    		</c:forEach>
        </ul>
    </div>
</div>
<jsp:include page="../wx_footer.jsp" />
<style>
	.search_part13_con .sxbtn{position:absolute;right:0.15rem;width:0.64rem;height:0.64rem;background:url(${rootPath}/statics_wx/images/icon_lb2.png) no-repeat center center;top:0;background-size:0.46rem 0.46rem}
	.search_part13_con .sxbtn.current{background:url(${rootPath}/statics_wx/images/icon_lb1.png) no-repeat center center;background-size:0.46rem 0.46rem}
	.search_part13_con{padding-right:0rem;padding-right:1rem;position:relative}
	.bjd_list1.current .bjd_list1_con ul li{float:left;width:50%;border-bottom: 0.04rem solid #e8e8e8;position:relative}
	.bjd_list1.current .bjd_list1_con ul li u{position:absolute;right:0;top:0;width:0.04rem;height:100%;background:#e8e8e8}
	.bjd_list1.current .bjd_list1_con ul li:nth-of-type(2n) u{background:none}
	.bjd_list1.current .bjd_list1_con ul li .box4 .pic{float:none;text-align:center;}
	.bjd_list1.current .bjd_list1_con ul li .box4 .item-info{margin-left:0;height:auto;border-bottom:none; }
	.bjd_list1.current .bjd_list1_con ul li .box4{padding:0 0.15rem;}
	.bjd_list1.current  .bjd_list1_con ul li .box4 .pic img{width:2.5rem;height:2.5rem;}
	.bjd_list1.current .bjd_list1_con ul li .box4 .item-info h2{margin-right:0;margin-bottom:0.15rem;height:0.72rem;overflow:hidden;word-break: break-all}
	.bjd_list1.current  .bjd_list1_con ul li .box4 .item-info h3{position:relative;}
	.bjd_list1.current .bjd_list1_con ul li .box4 .item-info h3 b{margin-top:-0.08rem;}
</style>
</body>
</html>